<template>
	<view class="">
		<view class="header">
			<view class="banner-swiper" v-if="swiperList.length>0">
				<swiper class="home-swiper" :current="activeIndex" @change="swiperChange">
					<swiper-item class="swiper-item" v-for="(item,index) in newCarDetail.seriesPictureList"
						:key="item.cucPictureId">
						<view class="item-image" v-if="item.picturePath">
							<image :src="https+item.picturePath" mode="scaleToFill"></image>
						</view>
					</swiper-item>
				</swiper>
				<text class="swiper_jb">{{ activeIndex+1 }}/{{ swiperList.length }}</text>
			</view>

			<view class="zw" v-else>
				<image src="../../static/zwtp1.jpg" mode="scaleToFill"></image>
			</view>

			<view class="detailbox" style="background: #fff; padding-bottom: 30rpx;">
				<view class="_paddingTop _flex _justify_between align-items_center">
					<view class="newCardeatilTit">
						<view class="">
							<text class="car_name">{{newCarDetail.seriesName}}</text>
							<text style="color: #888;">{{newCarDetail.carLevel}}</text>
						</view>
						<view class="car_price">
							<text
								style="color: #EB6E10;margin-right: 20rpx;font-size: 30rpx;">{{newCarDetail.startingPriceMin}}-{{newCarDetail.startingPriceMin}}万</text>

							<text
								style="color: #888;">指导价：{{newCarDetail.guidePriceMin}}-{{newCarDetail.guidePriceMax}}万</text>
						</view>
					</view>
					<view class="" style="text-align: center;" @click="newCarDepTo">
						<view class="">
							<image src="../../static/arguments.png" style="width: 50rpx;height: 50rpx;" mode=""></image>
						</view>
						<view class="">
							参数配置
						</view>
					</view>
				</view>
			</view>
			<view class="_paddingTop">
				<u-sticky>
					<u-tabs :list="listScoll" :is-scroll="false" active-color="#002B56" :current="current"
						@change="tabChange"></u-tabs>
				</u-sticky>
			</view>
			<view class="card-info" id="chexing">
				<!-- 车型 -->
				<view class="commonBox">
					<view class="car-title">
						<view class="car-title-l">车型</view>
					</view>
					<view class="tabBox _flex _paddingTop "
						style="padding-bottom: 20rpx;border-bottom: 1px solid #eee;">
						<view @click="tabYearChange(index)" v-for="(item,index) in tabYearList" :key="index"
							style="text-align: center;margin-right: 60rpx;">
							<view :class="['tabName', active==index?'active':'']">
								{{item}}款
							</view>
						</view>
					</view>
					<view class="_flex dataList" v-for="(item,index) in dataList" :key="index">
						<view class="news-wrap" style="width: 100%;">
							<view class="_flex _justify_between">
								<view style="font-weight: bold;">
									{{item.modelName}}
								</view>
								<view style="font-weight: bold;color: #EB6E10; min-width: 110rpx; text-align: right;">
									{{item.startingPrice}}万 <text style="font-size: 24rpx;">起</text>
								</view>
							</view>

							<view class="_flex _justify_between" style="color: #999; font-size: 24rpx;">
								<view class="ts">
									<view class="">
										{{item.gearType}}
									</view>
									<view style="margin-left: 40rpx;">
										<text style="color: #EB6E10;">{{}}</text> 人投诉<u-icon style="margin-left: 5rpx;"
											size="20" name="arrow-right"></u-icon>
									</view>
								</view>
								<view>
									指导价：{{item.guidePrice}}万
								</view>
							</view>

							<view class="_flex _justify_between">
								<view class="pk" >
									<view class="">
										<text  style="color: #EB6E10;">PK</text>对比
									</view>
									<view class="" style="margin-left: 40rpx;">
										<text  style="color: #EB6E10;">%</text>计算
									</view>
								</view>
								<view class="" style="color: #EB6E10;">
									<button type="" class="hqdj">获取底价</button>
								</view>
							</view>
						</view>
					</view>
				</view>


			</view>
			
			
			<view class="card-info" id="jingxiaoshang">
				<!-- 车型 -->
				<view class="commonBox">
					<view class="car-title">
						<view class="car-title-l">经销商</view>
					</view>
				     <view class="">
						 <null :iconSize="160" :textSize="28" v-if="companyList.length == 0"></null>
				     	<view class="_flex dataList" v-for="(item,index) in companyList" :key="index" v-if="companyList.length != 0">
				     		<view class="news-wrap" style="width: 100%;">
				     			<view class="_flex _justify_between">
				     				<view style="font-weight: bold;">
				     					{{item.dealersName}}
				     				</view>
				     				<view style="font-weight: bold;color: #EB6E10; min-width: 110rpx; text-align: right;">{{item.startingPrice}}万<text style="font-size: 24rpx;">起</text>
				     				</view>
				     			</view>
				     			<view class="_flex _justify_between">
				     				<view class="" style="color: #888;">
				     					{{item.dealersAddress}}
				     				</view>
				     				<view class="" style="color: #EB6E10;" @click="goTel(item.dealersPhone)">
				     					立即拨打
				     				</view>
				     			</view>
				     		</view>
				     	</view>
				     	
				     	
				     	
				     </view>
				
				</view>
			
			
			</view>
			<!-- 车主投诉 -->
			<!-- 				
					<view class="" style="border: 1px solid #eee;border-top: 0px;">
						<view class="_flex _justify_between"
							style=" font-size: 35rpx;background: #F9F9F9;padding: 20rpx; margin-top: 20rpx;">
							<view class="">
								八大系统故障
							</view>
							<view class="" style="color:#EB6E10 ;">
								共2个故障
							</view>
						</view>
						<view class="" style="padding: 11px;">
							<view class="_flex" v-for="(item,index) in breakdownList" :key="index">
								<text class="breakDownName">{{item.name}}</text>
								<view class="" style="width: 60%;">
									<u-line-progress active-color="#EB6E10" :percent="item.num"></u-line-progress>
								</view>
							</view>
						</view>
					</view>
					<view class="" style="border: 1px solid #eee;border-top: 0px;">
						<view class="_flex _justify_between"
							style=" font-size: 35rpx;background: #F9F9F9;padding: 20rpx; margin-top: 20rpx;">
							<view class="">
								典型投诉
							</view>
						</view>
						<view class="_flex _justify_between  _wrap" style="padding: 11px;">
							<view class="_flex _marginTop" style="border: 1px solid #EB6E10;color: #EB6E10;font-size: 24rpx;"
								v-for="(item,index) in complaintList" :key="index">
								<text style="background: #EB6E10;color: #fff;padding: 10rpx;">{{item.name}}</text>
								<text style="padding: 10rpx;display: inline-block;">{{item.desc}}</text>
							</view>
						</view>
					</view>
				</view> -->

		</view>

	</view>
	</view>
</template>

<script>
	import API from "@/api/buycar.js"
	import app from "../../App.vue"
	export default {
		name: "newCarDetail",
		onLoad(option) {
			console.log(option);
			this.seriesId = option.seriesId;
		},
		onShow() {
			this.cityId = getApp().globalData.cityId
			this.getNewCarDetail()
			this.getDealersList()
		},

		data() {
			return {
				seriesId: "",
				cityId:"",
				/* 轮播图 */
				https: getApp().globalData.picturePath,
				newCarDetail: {},
				tabYearList: [],
				dataList: [],
				dataListALL: [],
				listScoll: [{
						typeName: '车型'
					}, {
						typeName: '经销商'
					}, {
						typeName: '二手车',
					},
					{
						typeName: '车主投诉',
					},
				],
				active: 0, //tab栏
				current: 0,
				form: {},
				companyList: []
				// breakdownList: [{
				// 		name: "车身附件及电器",
				// 		num: 80
				// 	},
				// 	{
				// 		name: "制动系统",
				// 		num: 60
				// 	},
				// 	{
				// 		name: "转向系统",
				// 		num: 20
				// 	},
				// 	{
				// 		name: "轮胎",
				// 		num: 20
				// 	},
				// 	{
				// 		name: "电池",
				// 		num: 10
				// 	},
				// 	{
				// 		name: "电机",
				// 		num: 0
				// 	},
				// 	{
				// 		name: "电控",
				// 		num: 0
				// 	},

				// 	{
				// 		name: "前后桥及悬挂系统",
				// 		num: 0
				// 	},
				// ],
				// // 典型投诉
				// complaintList: [{
				// 		name: "车身附件及电器",
				// 		desc: "影音系统故障31个"
				// 	}
				// ],

			};
		},
		methods: {
			goTel(phone){
				uni.makePhoneCall({
				    phoneNumber: phone,//仅为示例
					success: (res) => {
					  console.log(res);
					},
				});
			},
			newCarDepTo(){
				uni.navigateTo({
					url:`/pagesB/newCarDep/newCarDep?seriesId=${this.seriesId}`
				})
			},
			getNewCarDetail() {
				let data = {
					seriesId: this.seriesId
				}
				API.getNewCarDetail(data).then(res => {
					console.log(res);
					this.newCarDetail = res.data
					this.tabYearList = res.data.modelYearList.map(val => {
						return val.year;
					})
					this.dataListALL = res.data.modelYearList
					this.dataList = res.data.modelYearList[0].sonList

				})
			},
			getDealersList() {
				let data = {
					seriesId: this.seriesId,
					cityId:this.cityId
				}
				API.getDealersList(data).then(res => {
					console.log(res);
					this.companyList = res.data
				
			
				})
			},
			tabChange(index) {
				this.current = index;
				if (index === 0) {
					uni.pageScrollTo({
						selector: '#chexing'
					})
				} else if (index === 1) {
					// 经销商
					uni.pageScrollTo({
						selector: '#jingxiaoshang'
					})
				} else if (index === 2) {
					uni.navigateTo({
						url:`/pagesA/buyCar/buyCar?seriesId=${this.newCarDetail.seriesId}&brandId=${this.newCarDetail.brandId}&seriesName=${this.newCarDetail.seriesName}`
					})
					
				} else if (index === 3) {
					
				} 
			},
			// 车型tab栏
			tabYearChange(idx) {
				this.active = idx;
				var year = this.tabYearList[idx]
				console.log("year")
				console.log(year)
				let i = this.dataListALL.findIndex((val,index) => {
					console.log(val);
					return val.year == year
				})
				console.log(i);
				this.dataList = this.dataListALL[i].sonList
			},
		}
	};
</script>
<style scoped lang="scss">
	/**轮播图*/
	.swiper {
		width: 100%;
		height: 230px;
		margin: 0px;
		position: relative;
	}

	.slide-nav {
		width: 100%;
		height: 100%;
		border-radius: 15rpx;
	}

	.slide-image {
		width: 100%;
		height: 100%;
	}

	.swiperCorner {
		right: 19rpx;
		position: absolute;
		background: #6C6766;
		color: #fff;
		padding: 8rpx 20rpx;
		bottom: 6px;
		border-radius: 8rpx;
		font-size: 24rpx;
	}




	.head-box {
		width: 100%;
		overflow-x: scroll;
	}

	.head-box .head-block {
		display: inline-block;
		background: #FCEBE4;
		color: #EB6E10;
		padding: 10rpx 20rpx;
		margin-right: 10rpx;
		white-space: nowrap;
	}

	.news-wrap {
		line-height: 45rpx;
		color: #333333;
	}

	.newsTxt {
		width: 340rpx;
		display: inline-block;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.tips {
		width: 30rpx;
		height: 30rpx;
	}

	.newsTip {
		background: #F4E5C3;
		display: inline-block;
		padding: 0 8rpx;
		margin-right: 8rpx;
	}

	.dataList {
		border-bottom: 1px solid #eee;
		padding-bottom: 10rpx;
		margin-top: 20rpx;
	}

	.tabBox {
		color: #002B56;
		align-items: flex-end;
		margin-top: 20rpx;
	}

	.tabName {
		font-size: 30rpx;
	}

	.tabBox .active {
		font-size: 36rpx;
		font-weight: bold;
		color: #EB6E10;
	}

	.breakDownName {
		display: inline-block;
		margin-right: 11px;
		width: 200rpx;
	}

	.buyBottom {
		position: fixed;
		background: #fff;
		width: 100%;
		bottom: 0px;
	}

	.commonBox {
		background-color: #fff;

		border-radius: 10rpx;

	}

	.commonTitle {
		color: #002A55;
		font-size: 34rpx;
		font-weight: bold;
		margin-top: 20rpx;
		padding-top: 20rpx;
	}

	.zw {
		width: 100%;
		height: 66vw;
		background-color: #efefef;
		display: flex;
		align-items: center;
		justify-content: center;
		fong-size: 30rpx;
		color: #999;
	}

	.zw image {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.detailbox {
		width: 100%;
		height: auto;
		overflow: hidden;
		background: #fff;
		padding: 24rpx;
		box-sizing: border-box;


	}

	.newCardeatilTit {
		border-right: 1px solid #eee;
		padding-right: 20rpx;
		width: calc(100% - 160rpx);
		box-sizing: border-box;

	}

	.car_name {
		font-size: 40rpx;
		font-weight: bold;
		margin-right: 20rpx;
	}

	.car_price {
		line-height: 60rpx;
	}

	.card-info {
		padding: 0rpx $uni-widthspace;
		margin: $uni-widthspace;
		box-sizing: border-box;
		border-radius: 10rpx;
		background-color: $uni-bg-color;

		.car-title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx 0rpx;
			box-sizing: border-box;
			font-size: 32rpx;
			font-weight: bolder;
			color: $car-basic-color;
			border-bottom: 2rpx solid #eee;
		}
	}

	.ts {
		display: flex;
		align-items: center;
		color: #999;
		font-size: 24rpx;
		line-height: 60rpx;
	}
	
	.pk{
		display: flex;
		align-items: center;
	}
	
	button.hqdj{
		background: #002B56;
		border-radius:10rpx;
		width:auto;
		height:50rpx;
		color:#fff;
		padding:0 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
	}
</style>
